<template lang="html">
<div class="">
  <div class="yourname">
    <p>账号</p>
  </div>
  <div class="name_box">
    <div class="name_title">
      <div class="name_img">
          <img :src="img" alt="">
      </div>
      <div class="name_desc">
        <p>{{name}}</p>
        <p> <img src="../../assets/images/lv.png" alt=""> <span class="level"> {{level}}</span></p>
      </div>
    </div>
    <div class="sing">
      <p class="sing_img"><img src="../../assets/images/sing.png" alt=""><span>签到</span> </p>
    </div>
  </div>
  <div class="my_tab">
    <div class="">
      <p>动态</p>
      <p>{{trends}}</p>
    </div>
    <div class="attention">
      <p>关注</p>
      <p>{{attention}}</p>
    </div>
    <div class="fens">
      <p>粉丝</p>
      <p>{{fens}}</p>
    </div>
    <div class="">
      <p><img src="../../assets/images/edit.png" alt=""></p>
      <p>我的资料</p>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'myid',
  data () {
    return {
      msg:"",
      name:"",
      level:"",
      img:"",
      trends:"",
      attention:"",
      fens:""
    }
  },mounted(){
    let uuid=localStorage.getItem("uuid")
    this.axios({
      url: this.HOST+"/user/detail",
      method: "post",
      params: {
        uid:uuid
      }
    }).then((res=>{
  console.log(res.data)
    this.name=res.data.profile.nickname
    this.level=res.data.level
    this.img=res.data.profile.avatarUrl
    this.trends=res.data.profile.eventCount
    this.attention=res.data.profile.follows
    this.fens=res.data.profile.followeds
      // this.namelist=res.data.profile
    })).catch(function(err){
      console.log(err)
    })

  },methods:{

  }
}
</script>

<style lang="css">
.level{
  vertical-align: middle;
}
.sing_img{
  border-radius: 10px;
  border:1px solid red;
  width: 1.1rem;
  font-size: .2rem;
  color:red;
}
.attention{
  border-left:1px solid gainsboro;
  border-right:1px solid gainsboro;
}
.fens{
  border-right:1px solid gainsboro;
}
.my_tab{
  width: 100%;
  height: 1.3rem;
  display: flex;
  justify-content: space-around;
  position: relative;
  align-items: center;
  background: white;
  top: 2.2rem;
  text-align: center;
  font-size: .28rem;
}
.my_tab div{
  width: 25%;
}
.my_tab div p{
  width: 100%;
}
.my_tab img{
  width: 18%;
}
html{
  width: 100%;
  height: 100%;
  background: #EAEAEA;
}
.name_title img{
  width: 60%;
  border-radius: 50%;
}
.name_img{
  width: 40%;
  text-align: center;
  line-height: 40%;
}
.name_desc{
  width: 60%;
}
.name_desc img{
  width: 12%;
  vertical-align: middle;
}
.name_box{
  width: 100%;
  height: 1.5rem;
  display: flex;
  justify-content: space-around;
  position: absolute;
  top:.7rem;
  background: white;
  border-bottom: 1px solid gainsboro;
}
.name_title{
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.sing{
  width: 30%;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
}
.sing img{
  width: 30%;
  vertical-align: middle;
  margin-right: 0.1rem;
}
.yourname{
  width: 100%;
  height: .7rem;
  background: red;
  text-align: center;
  line-height: .7rem;
  color: white;
  position:absolute;
  top: 0;
}
</style>
